<template>
  <div class="module owl-dynamic alert-primary mt1" v-if="userStore.isLogin && messageList && messageList.length > 0">
  <div class="scroll-dynamic">
    <div>
      <span class="d-none d-lg-block float-left">
      <span
          class="badge badge-danger mr-2 pr ftp2"><i class="fa fa-volume-up mr3"></i>我的消息<sup
          class="spinner-grow spinner-grow-sm ml-1 small"
          style=" width: .5rem; height: .5rem; "></sup>
      </span>
      </span>
        <ul style="margin-top: 0px;">
          <template v-for="(item,index) in messageList">
            <li class="animate__animated animate__slideInUp flex justify-between message-items" v-show="timercount == index">
              <a rel="bookmark" href="javascript:void(0);">
                <span><span class="fw">订阅内容:</span>【{{ item.title }}】</span>
                <span class="ml2"><span class="fw">订阅时间：</span>{{ formatMsgTime(item.createTime) }} </span>
              </a>
              <div>
                <a href="javascript:void(0);"   @click.prevent="handleUpdateMarkMessage(item,index)" class="mr10 red fz12">标为已读</a>
                <a v-if="item.url!='javascript:void(0);'" :href="item.url" class="green fz12 mr10" target="_blank">查看明细</a>
                <a  href="javascript:void(0);"   @click.prevent="handleCloseMessage"  class="fz12 xclose pr tp1"><i class="iconfont icon-shanchu4"></i></a>
              </div>
            </li>
          </template>
        </ul>
    </div>
  </div>
  </div>
</template>
<script setup>
const userStore = useStore.userState()
const timercount = ref(0)
const messageList = ref([])
const handleCloseMessage = ()=>{
   sessionStorage.setItem("message-mark",1)
   messageList.value = []
}
const handleAutoScroll = () => {
  setInterval(() => {
    if (timercount.value == 9) {
      timercount.value = -1
    }
    timercount.value++
  }, 3000)
}

function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

const handleLoadMessageData = async () => {
  if(userStore.isLogin) {
    const resp = await useLoadMessageApi()
    messageList.value = shuffleArray(resp.data.records)
  }
}

const handleUpdateMarkMessage= async (item,index) => {
    await useLoginDialog()
    await useUpdateMarkMessageByIdApi(item.id)
    messageList.value.splice(index,1)
    useMessage().success("操作成功")
}

onMounted(() => {
  if(userStore.isLogin) {
    var mark = sessionStorage.getItem("message-mark")
    if(mark && mark == 1){
      messageList.value = []
    }else {
      handleLoadMessageData()
      handleAutoScroll()
    }
  }
})
</script>
<style scoped>
.message-items .xclose{display: none}
.message-items:hover .xclose {display: inline-block}
</style>